<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/result.css" />
    <style>
        .layui-col-space10 {
            margin: 10px;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item" style="margin: 0;">
                    <label class="layui-form-label">车型</label>
                    <div class="layui-input-inline">
                        <select id="model" name="model" lay-verify="required">
                            <option value="*">全部</option>
                            <option value="奥迪A3">奥迪A3</option>
                            <option value="奥迪A4">奥迪A4</option>
                            <option value="奥迪A4L">奥迪A4L</option>
                            <option value="奥迪A6L">奥迪A6L</option>
                            <option value="奥迪A7">奥迪A7</option>
                            <option value="奥迪Q3">奥迪Q3</option>
                            <option value="奥迪Q5">奥迪Q5</option>
                            <option value="奥迪Q7">奥迪Q7</option>
                        </select>
                    </div>

                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="*">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="line1" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="line2" style="min-height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="line3" style="min-height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        const host = "http://localhost/LSTM_car_comment/public/";
        layui.use(['form', 'echarts'], function () {
            var form = layui.form;
            var echarts = layui.echarts;
            var $ = layui.jquery;
            var line1 = echarts.init(document.getElementById('line1'));
            var line2 = echarts.init(document.getElementById('line2'));
            var line3 = echarts.init(document.getElementById('line3'));

            const colorList = ["#9980FA", '#73DDFF', '#fe9a8b', '#F56948', '#ff9f43', '#2e86de', '#1dd1a1'];
            option1 = {
                title: {
                    text: '评论主题统计',
                    left: 'center'
                },
                dataset: {
                    dimensions: ['name', 'value'],
                    source: [
                        { 'value': 1048, 'name': '搜索引擎' },
                        { 'value': 735, 'name': '直接访问' },
                        { 'value': 580, 'name': '邮件营销' },
                        { 'value': 484, 'name': '联盟广告' },
                        { 'value': 300, 'name': '视频广告' }
                    ]
                },
                grid: [
                    { x: '55%' },//折线图位置控制
                ],
                color: colorList,
                tooltip: {
                    trigger: 'axis'
                },
                // legend: {
                //     orient: 'vertical',
                //     left: 'left',
                // },
                xAxis: {
                    type: 'category',
                    name: '主题'
                },
                yAxis: {
                    gridIndex: 0,
                    name: '数量'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        center: ['25%', '45%'],
                        data: [
                            { value: 1048, name: '搜索引擎' },
                            { value: 735, name: '直接访问' },
                            { value: 580, name: '邮件营销' },
                            { value: 484, name: '联盟广告' },
                            { value: 300, name: '视频广告' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }, {
                        type: 'bar',
                        barWidth: '50%',
                        color: ['#20bf6b'],

                    }
                ]
            };
            option2 = {
                title: {
                    text: '口碑走势',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#54a0ff'
                        }
                    }
                },
                xAxis: {
                    name: '时间',
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    name: '好评率',
                    max: 100,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                series: [{
                    data: [82, 93, 91, 34, 29, 33, 20],
                    type: 'line',
                    color: ['#6ab04c'],
                    areaStyle: {}
                }]
            };
            option3 = {
                title: {
                    text: '负面评论统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                color: [
                    '#60a3bc', '#9BD3FF'
                ],
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['负评数', '负评占比']
                },
                xAxis: [
                    {
                        name: '时间',
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量',
                    }
                ],
                series: [
                    {
                        name: '负评数',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    }
                ]
            };
            line1.setOption(option1);
            line2.setOption(option2);
            line3.setOption(option3);
            //图1
            $.get(host + "web/ksh/themepie", function (data) {
                line1.setOption({
                    series: {
                        data: data,
                    },
                    dataset: {
                        source: data
                    },
                });
            });
            //图2
            $.get(host + "web/ksh/emot", function (data) {
                line2.setOption({
                    xAxis: {
                        data: data[0]
                    },
                    series: [{
                        data: data[1]
                    }]
                });
            });
            //图3
            $.get(host + "web/ksh/negcontent", function (data) {
                line3.setOption({
                    xAxis: [{
                        data: data[0]
                    }],
                    series: [
                        {
                            name: '负评数',
                            type: 'bar',
                            data: data[1]
                        }
                    ]
                });
            });
            form.on('submit(*)', function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

                //图1
                $.post(host + 'web/ksh/themepieupdate', data.field,
                    function (res) {
                        //res就是返回的结果
                        console.log(res);
                        line1.setOption({
                            series: {
                                data: res,
                            },
                            dataset: {
                                source: res
                            },
                        });
                    }
                );
                $.post(host + 'web/ksh/emotupdate', data.field,
                    function (res) {
                        //res就是返回的结果
                        console.log(res);
                        line2.setOption({
                            xAxis: {
                                data: res[0]
                            },
                            series: [{
                                data: res[1]
                            }]
                        });
                    }
                );
                $.post(host + 'web/ksh/negcontentupdate', data.field,
                    function (res) {
                        //res就是返回的结果
                        console.log(res);
                        line3.setOption({
                            xAxis: [{
                                data: res[0]
                            }],
                            series: [
                                {
                                    data: res[1]
                                }
                            ]
                        });
                    }
                );
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
</body>

</html>